<template>
	<view class="c-container no-border c-container-item">
		<swiper :style="{ height: swiperHeight + 'px' }" :indicator-dots="true">
			<swiper-item v-for="(item, index) in banquetSuborder" :key="index">
				<view class="swiper-item-box swiper-item sub" :id="`banquet-suborder-${index}`">
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">桌数</view>
							<view class="col-text">{{ item.table_amount }}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">每桌费用</view>
							<view class="col-text">{{ item.table_price }}</view>
						</view>
					</view>
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">优惠金额</view>
							<view class="col-text">{{ item.banquet_discount }}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">费用总计</view>
							<view class="col-text">{{ item.banquet_totals }}</view>
						</view>
					</view>
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">签约时间</view>
							<view class="col-text">{{ item.sign_date }}</view>
						</view>
					</view>
					<view class="c-row" v-if="item.remark">
						<view class="c-row-col">
							<view class="col-title">备注</view>
							<view class="col-text col-remark">{{ item.remark }}</view>
						</view>
					</view>
					<view class="c-row" v-if="item.images.length > 0">
						<view class="c-row-col">
							<view class="col-title">附件列表</view>
							<view class="col-text col-text-img-box">
								<image
									class="col-img"
									v-for="(img, imgIndex) in item.images"
									:key="imgIndex"
									:src="img"
									@click="previewImg({ list: item.images, index: imgIndex })"
								></image>
							</view>
						</view>
					</view>
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">审核状态</view>
							<view class="col-text col-remark" :style="{ color: status[item.item_check_status].color }">{{ status[item.item_check_status].title }}</view>
						</view>
					</view>

					<!-- 增项费用列表 -->
					<view class="hs-table mt8 mb8" v-if="item.addons && item.addons.length">
						<view class="hs-table-row">
							<view class="hs-table-col title">增项类型</view>
							<view class="hs-table-col">增项数量</view>
							<view class="hs-table-col">增项价格</view>
							<view class="hs-table-col">增项小计</view>
						</view>
						<view class="hs-table-row" v-for="(sub, index) in item.addons" :key="index">
							<view class="hs-table-col title">{{ sub.tag_title }}</view>
							<view class="hs-table-col">{{ sub.amount }}</view>
							<view class="hs-table-col">{{ sub.price }}</view>
							<view class="hs-table-col">{{ sub.total }}</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { getSwiperMaxHeight } from '@/utils/funs.js';

export default {
	props: {
		parent: {
			type: Object
		},
		banquetSuborder: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			swiperHeight: 0,
			status: {
				0: {
					title: '待审核',
					color: '#999'
				},
				1: {
					title: '审核中',
					color: '#999'
				},
				2: {
					title: '审核通过',
					color: '#409EFF'
				},
				3: {
					title: '审核驳回',
					color: 'red'
				},
				13: {
					title: '已撤销',
					color: '#999'
				}
			}
		};
	},
	beforeMount() {
		this.getSwiperMaxHeight = getSwiperMaxHeight;
	},
	mounted() {
		let banquetSuborder = this.banquetSuborder;
		banquetSuborder.forEach((ele, index) => {
			let id = `#banquet-suborder-${index}`;
			this.getSwiperMaxHeight(this, id);
		});
	},
	methods: {
		// 预览图片
		previewImg(data) {
			uni.previewImage({
				urls: data.list,
				current: data.index
			});
		}
	}
};
</script>

<style lang="less">
@import url('../../common.less');

</style>
